<!-- 体检预约查询页面 -->
<template>
  <div class="health-check">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="体检预约查询"
      left-arrow
      @click-left="onClickLeft"
      fixed
      :style="{ background: '#4fc08d' }"
      :title-style="{ color: '#fff', fontSize: '18px' }"
      :left-arrow-style="{ color: '#fff' }"
    />

    <!-- 下次体检提醒 -->
    <div class="next-check">
      <div class="check-info">
        <van-icon name="clock-o" size="32" color="#4fc08d" />
        <div class="info-text">
          <h3>距离下次体检还有 {{ daysUntilNextCheck }} 天</h3>
          <p>下次体检时间：{{ nextCheckDate }}</p>
          <p>值班医生：{{ doctorOnDuty }}</p>
        </div>
      </div>
    </div>

    <!-- 日历区域 -->
    <div class="calendar-section">
      <van-calendar
        :show-title="false"
        :style="{ height: '400px' }"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="calendarFormatter"
        @select="onSelectDay"
        color="#4fc08d"
      />
    </div>

    <!-- 体检记录 -->
    <div class="check-records">
      <div class="section-title">体检记录</div>
      <van-cell-group inset>
        <van-cell
          v-for="record in checkRecords"
          :key="record.id"
          :title="record.date"
          :label="record.status"
          :value="record.result"
          :value-class="getStatusClass(record.status)"
          is-link
          :title-style="{ fontSize: '16px', fontWeight: 'bold' }"
          :label-style="{ fontSize: '14px', marginTop: '4px' }"
          @click="showRecordDetail(record)"
        />
      </van-cell-group>
    </div>

    <!-- 体检详情弹窗 -->
    <van-popup
      v-model:show="showDetail"
      round
      position="bottom"
      :style="{ height: '70%' }"
    >
      <div class="detail-popup">
        <div class="popup-title">体检详情</div>
        <div class="detail-content" v-if="selectedRecord">
          <van-cell-group inset>
            <van-cell 
              title="体检日期" 
              :value="selectedRecord.date"
              :title-style="{ fontSize: '16px' }"
              :value-style="{ fontSize: '16px' }"
            />
            <van-cell 
              title="体检状态" 
              :value="selectedRecord.status"
              :title-style="{ fontSize: '16px' }"
              :value-style="{ fontSize: '16px' }"
            />
            <van-cell 
              title="体检项目" 
              :value="selectedRecord.items"
              :title-style="{ fontSize: '16px' }"
              :value-style="{ fontSize: '16px' }"
            />
            <van-cell 
              title="体检医生" 
              :value="selectedRecord.doctor"
              :title-style="{ fontSize: '16px' }"
              :value-style="{ fontSize: '16px' }"
            />
            <van-cell 
              title="体检结果" 
              :value="selectedRecord.result"
              :title-style="{ fontSize: '16px' }"
              :value-style="{ fontSize: '16px' }"
            />
          </van-cell-group>
          <div class="detail-notes" v-if="selectedRecord.notes">
            <h4>医生建议：</h4>
            <p>{{ selectedRecord.notes }}</p>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  NavBar as VanNavBar,
  Calendar as VanCalendar,
  Icon as VanIcon,
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Popup as VanPopup,
  Toast
} from 'vant'

const router = useRouter()
const showDetail = ref(false)
const selectedRecord = ref(null)

// 返回按钮点击事件
const onClickLeft = () => {
  router.back()
}

// 体检记录数据
const checkRecords = ref([
  {
    id: 1,
    date: '2025-05-05',
    status: '待体检',
    result: '-',
    items: '常规体检、血压测量、心电图、血常规',
    doctor: '张医生',
    notes: ''
  },
  {
    id: 2,
    date: '2025-04-07',
    status: '已完成',
    result: '正常',
    items: '常规体检、血压测量、心电图',
    doctor: '李医生',
    notes: '各项指标正常，建议继续保持良好的生活习惯。'
  },
  {
    id: 3,
    date: '2025-03-03',
    status: '已完成',
    result: '正常',
    items: '常规体检、血压测量、心电图、血常规',
    doctor: '张医生',
    notes: '各项指标正常，建议继续保持当前的饮食和运动习惯。'
  },
  {
    id: 4,
    date: '2025-02-03',
    status: '已完成',
    result: '异常',
    items: '常规体检、血压测量、心电图、血糖检测',
    doctor: '李医生',
    notes: '血压偏高，建议注意饮食，增加运动量。'
  },
  {
    id: 5,
    date: '2025-01-06',
    status: '已完成',
    result: '正常',
    items: '常规体检、血压测量、心电图',
    doctor: '张医生',
    notes: '各项指标正常，建议继续保持良好的生活习惯。'
  }
])

// 日历相关
const minDate = new Date(2025, 0, 1)
const maxDate = new Date(2025, 11, 31)

// 体检详情
const nextCheckDate = '2025-05-05 (周一)'
const doctorOnDuty = '张医生'
const daysUntilNextCheck = computed(() => {
  const today = new Date()
  const next = new Date('2025-05-05')
  const diffTime = next - today
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
})

// 日历日期格式化
const calendarFormatter = (day) => {
  const checkDay = checkRecords.value.find(record => 
    record.date === `${day.date.getFullYear()}-${String(day.date.getMonth() + 1).padStart(2, '0')}-${String(day.date.getDate()).padStart(2, '0')}`
  )
  
  if (checkDay) {
    day.className = 'check-day'
    if (checkDay.status === '待体检') {
      day.className += ' future-check'
    } else {
      day.className += ' past-check'
    }
  }
  return day
}

// 选择日期事件
const onSelectDay = (day) => {
  const selectedDate = `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}`
  const record = checkRecords.value.find(r => r.date === selectedDate)
  
  if (record) {
    selectedRecord.value = record
    showDetail.value = true
  } else {
    Toast('该日期没有体检安排')
  }
}

// 显示记录详情
const showRecordDetail = (record) => {
  selectedRecord.value = record
  showDetail.value = true
}

// 获取状态样式类
const getStatusClass = (status) => {
  return {
    'status-completed': status === '已完成',
    'status-pending': status === '待体检'
  }
}
</script>

<style lang="scss" scoped>
.health-check {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  padding-bottom: 20px;
}

.next-check {
  margin: 12px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .check-info {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    .info-text {
      flex: 1;

      h3 {
        margin: 0 0 12px;
        font-size: 20px;
        color: #4fc08d;
        font-weight: bold;
      }

      p {
        margin: 8px 0;
        font-size: 16px;
        color: #333;
        line-height: 1.6;
      }
    }
  }
}

.calendar-section {
  margin: 12px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  :deep(.van-calendar__header) {
    box-shadow: none;
  }

  :deep(.van-calendar__day) {
    font-size: 16px;
    height: 50px;
  }

  :deep(.check-day) {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 6px;
      right: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    &.future-check::after {
      background-color: #4fc08d;
    }

    &.past-check::after {
      background-color: #ff6b6b;
    }
  }
}

.check-records {
  margin: 12px;

  .section-title {
    margin-bottom: 12px;
    padding-left: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  :deep(.van-cell-group) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  :deep(.van-cell) {
    padding: 16px;
    
    &::after {
      border-color: #ebedf0;
    }
  }
}

.status-completed {
  color: #4fc08d !important;
  font-size: 16px !important;
  font-weight: bold;
}

.status-pending {
  color: #4fc08d !important;
  font-size: 16px !important;
  font-weight: bold;
}

.detail-popup {
  padding: 24px;

  .popup-title {
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #333;
  }

  .detail-notes {
    margin-top: 20px;
    padding: 0 16px;

    h4 {
      margin: 0 0 12px;
      font-size: 18px;
      color: #333;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #666;
      line-height: 1.6;
    }
  }

  :deep(.van-cell-group) {
    border-radius: 12px;
    overflow: hidden;
  }

  :deep(.van-cell) {
    padding: 16px;
    
    &::after {
      border-color: #ebedf0;
    }
  }
}
</style> 